<template>
    <el-row>
        <el-col :span="24">
            <el-menu
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                mode="vertical"
                :default-active="routePath"
                :router="true">
                <el-menu-item v-for="(item, index) in menus" :key="index" :index="item.name">
                    <span slot="title">
                        <i :class="item.icon"></i>
                        {{item.text}}
                    </span>
                </el-menu-item>
            </el-menu>
        </el-col>
    </el-row>
</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
import AsideMenuData from '@/data/AsideMenuData';
import {ISTATE} from '@/store';

@Component
export default class AsideMenu extends Vue {
    // 菜单数组
    private menus: Array<any> = [];

    created() {
        this.menus = AsideMenuData;
    }

    // 计算属性
    /**
        computed: {
            routePath() {
                return this.$store.state.routePath
            }
        }
    */
    get routePath() {
        let data: ISTATE = this.$store.state;
        return data.routePath;
    }
}
</script>

<style scoped>
.el-menu-item.is-active {
    background-color: rgb(67, 74, 80) !important;
}
</style>